import React, { useEffect, useState } from 'react'
import {nanoid} from 'nanoid'
import Footer from '../Footer/Footer'
import Header from '../Header'
import Main from '../Main/Main'
import PubSub from 'pubsub-js'
import './index.css'
export default function TodoList() {
    // 状态数据定义
    let [todos, setTodos] = useState([
        {
            id:nanoid(),
            title:'吃饭',
            isDone:false
        },
        {
            id:nanoid(),
            title:'睡觉',
            isDone:false
        },
        {
            id:nanoid(),
            title:'敲代码',
            isDone:true
        }
    ])
    useEffect(() => {
        // 使用PubSub完成添加数据操作
        let addTodoId = PubSub.subscribe('addTodo',(msg, title) =>{
            let todo = {
                id: nanoid(),
                title,
                isDone: false
            }
            //  PubSub在useEffect中使用时，会产生闭包，
            // 导致永远只能拿到初始值，需要使用setXXX函数的第二种用法，回调函数用法
            setTodos(todos => {
                return [todo, ...todos]
            })
        })
        // 使用PubSub完成删除数据操作
        let delTodoId = PubSub.subscribe('delTodo', (msg, id) => {
            setTodos(todos => {
                return todos.filter(item => item.id !== id)
            })
        })
        // 使用PubSub完成切换单个选中状态
        let checkOneId = PubSub.subscribe('checkOne',(msg, id) => {
            setTodos(todos => {
                return todos.map(item => {
                    if(item.id === id) {
                        item.isDone = !item.isDone
                    }
                    return item
                })
            })
        })
        // 全选反选框
        let checkAllId = PubSub.subscribe('checkAll', (msg, check) => {
            setTodos(todos.map(item =>{
                item.isDone = check
                return item
            }))
        })
        // 删除已完成的任务
        let delhasDoneId = PubSub.subscribe('delhasDone', (msg, flag) => {
            setTodos(todos => {
                return todos.filter(item => item.isDone === false )
            })
        })
        return () => {
            PubSub.unsubscribe(addTodoId) // 清除添加订阅
            PubSub.unsubscribe(delTodoId) // 清除删除订阅
            PubSub.unsubscribe(checkOneId) // 清除单个选中订阅
            PubSub.unsubscribe(checkAllId) // 切换所有选中订阅
            PubSub.unsubscribe(delhasDoneId) // 清除完成的订阅
        }
       
    }, [todos])

    return (
        <>
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header />
                    <Main todos={todos}/>
                    <Footer todos={todos}/>
                </div>
            </div>
        </>
    )
}
